import { useModel } from "@umijs/max"
import { App, Card, Modal, Row } from "antd"
import { debounce } from "lodash"
import React, { useCallback, useRef } from "react"

const CimMessageModal: React.FC = () => {
  const inputRef = useRef<any>(null)
  const { message } = App.useApp()
  const { callPy } = useModel("websocketModel")
  const {
    cimMessageModalVisible,
    cimMessageType,
    cimMessage,
    showTimeLeft,
    updateProduceData
  } = useModel("produceModel")

  // 使用防抖进行检查，2秒后执行
  const debouncedCheck = useCallback(
    debounce((value: string) => {
      if (value && value.length < 3) {
        message.warning("短批号必须大于3位")
      }
    }, 2000),
    []
  )

  const handleCancel = async () => {
    updateProduceData({
      cimMessageModalVisible: false,
      cimMessageType: "",
      cimMessage: "",
      showTimeLeft: 0
    })
    const response = await callPy("eapHandler", "close_cim_message_handler", [])
  }

  return (
    <Modal
      title={
        <span style={{ color: "#1890ff", fontSize: 16, fontWeight: "bold" }}>
          CIM消息提示框
        </span>
      }
      open={cimMessageModalVisible}
      width={500}
      style={{ top: 200 }}
      footer={null}
      onCancel={handleCancel}
    >
      <Card>
        <Row>
          <span
            style={{ color: "green", fontWeight: "bold", fontSize: 16, marginLeft: 10 }}
          >
            消息类型:
          </span>
          <span
            style={{ color: "orange", fontWeight: "bold", fontSize: 16, marginLeft: 15 }}
          >
            {cimMessageType}
          </span>
        </Row>
        <Row style={{ marginTop: 10 }}>
          <span
            style={{ color: "green", fontWeight: "bold", fontSize: 16, marginLeft: 10 }}
          >
            消息内容:
          </span>
          <span
            style={{ color: "orange", fontWeight: "bold", fontSize: 16, marginLeft: 15 }}
          >
            {cimMessage}
          </span>
        </Row>
        <Row style={{ marginTop: 10 }}>
          <span
            style={{ color: "green", fontWeight: "bold", fontSize: 16, marginLeft: 10 }}
          >
            显示剩余时间:
          </span>
          <span
            style={{ color: "orange", fontWeight: "bold", fontSize: 16, marginLeft: 15 }}
          >
            {showTimeLeft}
          </span>
        </Row>
      </Card>
    </Modal>
  )
}

export default CimMessageModal
